import React from 'react'
import { useWechatAuth } from './hooks/useWechatAuth'
import UserProfile from './components/UserProfile'
import AuthButton from './components/AuthButton'
import LoadingSpinner from './components/LoadingSpinner'

function App(): JSX.Element {
  const {
    userInfo,
    loading,
    error,
    isWechat,
    startAuth,
    logout,
    refreshUserInfo,
    isAuthenticated
  } = useWechatAuth()

  return (
    <div className="container">
      <header style={{ textAlign: 'center', marginBottom: '30px' }}>
        <h1 style={{ color: '#333', fontSize: '24px', fontWeight: 600, marginBottom: '10px' }}>
          微信公众号H5应用
        </h1>
        <p style={{ color: '#666', fontSize: '14px' }}>基于React + Vite构建的微信授权应用</p>
      </header>

      {error && (
        <div className="error-message">
          <strong>❌ 错误：</strong>
          <p>{error}</p>
        </div>
      )}

      <main>
        {loading && !isAuthenticated ? (
          <LoadingSpinner message="正在获取用户信息..." />
        ) : isAuthenticated ? (
          <>
            <UserProfile userInfo={userInfo!} onLogout={logout} onRefresh={refreshUserInfo} />
            <div style={{ marginTop: '30px' }}>
              <h3 style={{ color: '#333', marginBottom: '20px', textAlign: 'center' }}>🎉 授权成功！</h3>
              <div style={{ background: '#f8f9fa', padding: '20px', borderRadius: '10px', textAlign: 'center' }}>
                <p style={{ color: '#666', marginBottom: '15px' }}>您已成功授权，现在可以使用完整功能</p>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))', gap: '15px', marginTop: '20px' }}>
                  <div style={{ background: 'white', padding: '15px', borderRadius: '8px', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' }}>
                    <div style={{ fontSize: '24px', marginBottom: '8px' }}>📱</div>
                    <div style={{ fontSize: '12px', color: '#666' }}>个人中心</div>
                  </div>
                  <div style={{ background: 'white', padding: '15px', borderRadius: '8px', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' }}>
                    <div style={{ fontSize: '24px', marginBottom: '8px' }}>🎮</div>
                    <div style={{ fontSize: '12px', color: '#666' }}>互动游戏</div>
                  </div>
                  <div style={{ background: 'white', padding: '15px', borderRadius: '8px', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' }}>
                    <div style={{ fontSize: '24px', marginBottom: '8px' }}>🎁</div>
                    <div style={{ fontSize: '12px', color: '#666' }}>优惠活动</div>
                  </div>
                  <div style={{ background: 'white', padding: '15px', borderRadius: '8px', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' }}>
                    <div style={{ fontSize: '24px', marginBottom: '8px' }}>📞</div>
                    <div style={{ fontSize: '12px', color: '#666' }}>联系客服</div>
                  </div>
                </div>
              </div>
            </div>
          </>
        ) : (
          <AuthButton onAuth={startAuth} loading={loading} isWechat={isWechat} />
        )}
      </main>

      <footer style={{ textAlign: 'center', marginTop: '40px', padding: '20px 0', borderTop: '1px solid #eee', color: '#999', fontSize: '12px' }}>
        <p>© 2024 微信公众号H5应用</p>
        <p>Powered by React + Vite</p>
      </footer>
    </div>
  )
}

export default App
